<template>
    <Page>
        <!-- 头部布局 -->
        <template #hd>
            <el-row class="a" style="font-size: 14px; font-weight:600;">
                <el-form-item label="员工类别" style="margin-left:30px;">
                    <el-select v-model="value" filterable placeholder="请选择员工类别" clearable >
                        <el-option lable="店长" value="店长"></el-option>
                    <el-option lable="收银人员" value="收银人员"></el-option>
                    <el-option lable="销售人员" value="销售人员"></el-option>
                    <el-option lable="服务人员" value="服务人员"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="姓名" style="margin-left:30px;">
                    <el-input placeholder="请输入姓名" clearable v-model="input" />
                </el-form-item>
                <el-form-item label="手机号" style="margin-left:30px;">
                    <el-input placeholder="请输入手机号" clearable v-model="input1" />
                </el-form-item>
                <el-form-item label="状态" style="margin-left:60px;">
                    <el-select v-model="value1" filterable placeholder="状态" clearable>
                        <el-option label="启用" value="1" />
                        <el-option label="禁用" value="0" />
                    </el-select>
                </el-form-item>
                <el-button @click="getList" style="margin-left:10px; font-size: 13px;" icon="Search">搜索</el-button>
                <el-button style="font-size: 13px;" icon="Refresh" @click="getListRest">重置</el-button>
                <el-button @click="dialogFormVisible = true" style="font-size: 13px;" icon="Plus">新增员工</el-button>
            </el-row>
        </template>
        <!-- 显示数据表格 -->
        <template #ct>
            <el-table :data="list" height="100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#f8f8f9', 'height': '50px' }"
                :cell-style="{ 'text-align': 'center', 'font-size': '12px' }">
                <el-table-column prop="id" label="ID" width="55" />
                <el-table-column prop="category" label="类别" />
                <el-table-column prop="name" label="姓名" />
                <el-table-column prop="phone" label="手机号" />
                <el-table-column prop="remark" label="关联会员ID" />
                <el-table-column prop="Associatestore" label="所属店铺" />
                <el-table-column prop="state" label="状态" style="text-align: center;">
                    <template #default="{ row }">
                        <el-switch :before-change="() => changestate(row, row.state, row.id)" v-model="row.state" class="ml-2"
                            :active-value="1" :inactive-value="0" style="--el-switch-on-color: #00acac;" />
                    </template>
                </el-table-column>
                <el-table-column prop="createdAt" label="创建时间" width="100" style="text-align: center;">
                    <template #default="{ row }"> {{ formatTime(row.createdAt) }}</template>
                </el-table-column>
                <el-table-column prop="updatedAt" label="更新时间" width="100" style="text-align: center;">
                    <template #default="{ row }"> {{ formatTime(row.updatedAt) }}</template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="{ row }">
                        <el-button @click="openEdit({ ...row })" type='success' text='success'
                            style="color:#00acac; font-size: 12px;" link icon="EditPen">修改</el-button>
                        <el-button @click="handleDel(row.id)" type='success' text='success'
                            style="color:#00acac; font-size: 12px;" link icon="Delete">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <!-- 底部分页器 -->
        <template #ft>
            <el-pagination :small="true" :current-page="page" :page-sizes="[10, 20, 30]" :background="true"
                layout="total, sizes, prev, pager, next, jumper," :total="total" @size-change="handeSizeChange"
                @current-change="handlePageChange">
            </el-pagination>
        </template>
    </Page>
    <!-- 添加店铺弹窗 -->
    <el-dialog v-model="dialogFormVisible" title="新增员工" width="700">
        <el-form :model="staff" :rules="rules">
            <el-form-item label="员工类别" :label-width="140">
                <el-select v-model="staff.category" placeholder="请选择员工类别">
                    <el-option value="店长">店长</el-option>
                    <el-option value="收银人员">收银人员</el-option>
                    <el-option value="销售人员">销售人员</el-option>
                    <el-option value="服务人员">服务人员</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="姓名" :label-width="140" prop="name">
                <el-input v-model="staff.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="手机号" :label-width="140" prop="phone">
                <el-input v-model="staff.phone" autocomplete="off" />
            </el-form-item>
            <el-form-item label="所属店铺" :label-width="140">
                <el-select v-model="staff.Associatestore" placeholder="请选择所属店铺">
                    <el-option value="海口解放路店">海口解放路店</el-option>
                    <el-option value="海口永万路店">海口永万路店</el-option>
                    <el-option value="海口长彤路店">海口长彤路店</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="备注信息" :label-width="140">
                <el-input v-model="staff.remark" :rows="2" type="textarea" placeholder="请输入内容" />
            </el-form-item>
            <el-form-item label="状态" :label-width="140">
                <el-radio-group v-model="staff.state">
                    <el-radio :label="1">启用</el-radio>
                    <el-radio :label="0">禁用</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" v-on:click="staffAdd">
                    确认
                </el-button>
                <el-button @click="dialogFormVisible = false">取消</el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 编辑店铺弹窗 -->
    <el-dialog v-model="showEdit" title="编辑店铺" width="600">
        <el-form :model="editstaff" :rules="rules">
            <el-form-item label="员工类别" :label-width="140">
                <el-input v-model="editstaff.category" autocomplete="off" />
            </el-form-item>
            <el-form-item label="姓名" :label-width="140" prop="name">
                <el-input v-model="editstaff.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="手机号" :label-width="140" prop="phone">
                <el-input v-model="editstaff.phone" autocomplete="off" />
            </el-form-item>
            <el-form-item label="所属店铺" :label-width="140">
                <el-input v-model="editstaff.Associatestore" autocomplete="off" />
            </el-form-item>
            <el-form-item label="备注信息" :label-width="140">
                <el-input v-model="editstaff.remark" :rows="2" type="textarea" placeholder="Please input" />
            </el-form-item>
            <el-form-item label="状态" :label-width="140">
                <el-radio-group v-model="editstaff.state">
                    <el-radio :label="1">启用</el-radio>
                    <el-radio :label="0">禁用</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" v-on:click="handleEidt">
                    确认
                </el-button>
                <el-button @click="showEdit = false">取消</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts" src="./index"></script>
<style lang="scss" scoped>
@import './style.scss';
</style>
